<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="dist/css/zxy-css-lib.min.css"/>
</head>
<body>
<div class="container" style="max-width:100%;">
    <header class="bg-primary">
        <nav>
            <h1 class="text-white"><b>知行易组件库</b></h1>
        </nav>
    </header>
    <section style="overflow-y:hidden;">
        <div class="lui-vertical-control" style="padding-top:45px">
            <aside class="lui-vertical-control-inverted span1" style="border-right:solid 1px #f0f0f0">
                <a class="lui-control-item active" href="#typegraphy">文本样式</a>
                <a class="lui-control-item" href="#textcolor">文字颜色</a>
                <a class="lui-control-item" href="#badge">数字角标</a>
                <a class="lui-control-item" href="#button">按钮</a>
                <a class="lui-control-item" href="#search">搜索栏</a>
                <a class="lui-control-item" href="#collapse">折叠菜单</a>
                <a class="lui-control-item" href="#form">表单</a>
                <a class="lui-control-item" href="#grid">栅格</a>
                <a class="lui-control-item" href="#confirm">确认框</a>
                <a class="lui-control-item" href="#tip">Totas</a>
                <a class="lui-control-item" href="#loading">加载提示</a>
                <a class="lui-control-item" href="#tab">标签页</a>
                <a class="lui-control-item" href="#tab-vertical-scroll">左侧选项卡</a>
                <a class="lui-control-item" href="#tab-horizontal-scroll">顶部选项卡</a>
                <a class="lui-control-item" href="#list">列表</a>
                <a class="lui-control-item" href="#medialist">图文列表</a>
                <a class="lui-control-item" href="#toolbar">工具栏</a>
                <a class="lui-control-item" href="#panel">侧栏</a>
                <!--<li class="lui-control-item"><a cla"h2 item-link" href="#collapse">侧滑菜单(待)</a></li>-->
                <a class="lui-control-item" href="#keyboard">自定义键盘</a>
                <!--<a class="lui-control-item" href="#datetime">日期时间</a>-->
                <!--<div class="lui-control-item"><a href="#404">404页面</a></div>-->
            </aside>
            <section class="lui-vertical-control-content span11 h2">
                <!-- 文本样式-->
                <ul id="typegraphy">
                    <li class="lui-list-item">
                        <p class="lui-header">文本样式</p>
<pre><code class="html">    &lt;div class="larger-3x"&gt;特殊字体&lt;/div&gt;
    &lt;div class="larger-2x"&gt;特殊字体&lt;/div&gt;
    &lt;h1&gt;标题一&lt;/h1&gt;
    &lt;h2&gt;标题二&lt;/h2&gt;
    &lt;h3&gt;标题三&lt;/h3&gt;
    &lt;h4&gt;标题四&lt;/h4&gt;
    &lt;h5&gt;标题五&lt;/h5&gt;
    &lt;h6&gt;标题六&lt;/h6&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 文本颜色-->
                <ul id="textcolor">
                    <li>
                        <p class="lui-header">文本颜色</p>
<pre><code class="html">    &lt;div class="text-primary"&gt;软件主色&lt;/div&gt;
    &lt;div class="text-success"&gt;颜色一&lt;/div&gt;
    &lt;div class="text-warming"&gt;颜色二&lt;/div&gt;
    &lt;div class="text-dark"&gt;颜色三&lt;/div&gt;
    &lt;div class="text-muted"&gt;颜色四&lt;/div&gt;
    &lt;div class="text-white"&gt;颜色五&lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 数字角标-->
                <ul id="badge">
                    <li>
                        <p class="lui-header">数字角标</p>
<pre><code class="html">    &lt;h2&gt;有底色&lt;/h2&gt;
    &lt;p&gt;
    &lt;span class="lui-badge"&gt;5&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-primary"&gt;9&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-warning"&gt;99+&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-success"&gt;12&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-custom"&gt;120&lt;/span&gt;
    &lt;/p&gt;
    &lt;h2&gt;无底色&lt;/h2&gt;
    &lt;p&gt;
    &lt;span class="lui-badge lui-badge-inverted"&gt;5&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-primary lui-badge-inverted"&gt;12&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-warning lui-badge-inverted"&gt;578&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-success lui-badge-inverted"&gt;3&lt;/span&gt;
    &lt;span class="lui-badge lui-badge-custom lui-badge-inverted"&gt;120&lt;/span&gt;
    &lt;/p&gt;
    &lt;h2&gt;右上角&lt;/h2&gt;
    &lt;p class="h1"&gt;
    &lt;label style="position:relative"&gt;
    消息 &lt;span class="lui-badge lui-badge-primary lui-badge-sup"&gt;12&lt;/span&gt;
    &lt;/label&gt;
    &lt;/p&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 按钮-->
                <ul id="button">
                    <li>
                        <p class="lui-header">按钮</p>
<pre><code class="html">
    &lt;button class="lui-btn"&gt;默认&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-primary"&gt;提交&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-success"&gt;提交&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-disabled"&gt;禁用&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-warning"&gt;警告&lt;/button&gt;

    &lt;button class="lui-btn lui-btn-radius"&gt;默认&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-primary lui-btn-radius"&gt;提交&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-success lui-btn-radius"&gt;成功&lt;/button&gt;

    &lt;button class="lui-btn lui-btn-radius lui-btn-block"&gt;默认&lt;/button&gt;

    &lt;a href="#" class="lui-btn lui-btn-link"&gt;默认&lt;/a&gt;
    &lt;a href="#" class="lui-btn lui-btn-link text-warming"&gt;警告&lt;/a&gt;
    &lt;a href="#" class="lui-btn lui-btn-link text-success"&gt;成功&lt;/a&gt;

    &lt;button class="lui-btn lui-btn-primary"&gt;默认&lt;span class="lui-badge lui-badge-primary"&gt;12&lt;/span&gt;&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-warning"&gt;默认&lt;span class="lui-badge lui-badge-warning"&gt;12&lt;/span&gt;&lt;/button&gt;
    &lt;button class="lui-btn lui-btn-primary"&gt;默认&lt;span class="icon-refresh"&gt;&lt;/span&gt; &lt;/button&gt;
    &lt;button class="lui-btn lui-btn-warning"&gt;默认&lt;span class="icon-trash"&gt;&lt;/span&gt; &lt;/button&gt;

</code></pre>
                    </li>
                </ul>
                <!-- 搜索栏-->
                <ul id="search">
                    <li>
                        <p class="lui-header">搜索栏</p>
<pre><code class="html">    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;搜索框&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;header class="bg-white"&gt;
    &lt;nav class="h2"&gt;
    &lt;div class="span3 text-nowrap"&gt;已选要求：&lt;/div&gt;
    &lt;div class="lui-search span9"&gt;
    &lt;input type="text"/&gt;
    &lt;i class="lui-search-clear"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 折叠菜单-->
                <ul id="collapse">
                    <li>
                        <p class="lui-header">折叠菜单</p>
<pre><code class="html">    &lt;details class="lui-collapse"&gt;
    &lt;summary&gt;门店名称&lt;/summary&gt;
    &lt;ul class="lui-list lui-list-border lui-dropdown-menu"&gt;
    &lt;li class="lui-list-item"&gt;
    &lt;h1&gt;门店一&lt;/h1&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    &lt;h1&gt;门店二&lt;/h1&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    &lt;h1&gt;门店三&lt;/h1&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/details&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 表单-->
                <ul id="form">
                    <li>
                        <p class="lui-header">表单</p>
<pre><code class="html">    &lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;表单&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    &lt;div class="lui-form-ground"&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;姓名：&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;input type="text" placeholder="请输入姓名"/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;手机号：&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;input type="number" placeholder="请输入手机号码" pattern="[0-9]"/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;密码：&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;input type="password" placeholder="请输入密码"/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;收货地址：&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;input type="text" placeholder="请输入小区/街道/写字楼等"/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;input type="text" placeholder="请输入小区/街道/写字楼等"/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;&lt;/div&gt;
    &lt;div class="input lui-radio"&gt;
    &lt;label&gt; &lt;input type="radio" name="sex" checked/&gt; Male &lt;/label&gt;
    &lt;label&gt; &lt;input type="radio" name="sex"/&gt;Famle &lt;/label&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;&lt;/div&gt;
    &lt;div class="input lui-checkbox"&gt;
    &lt;label&gt;&lt;input type="checkbox" name="dish" checked/&gt;微辣&lt;/label&gt;
    &lt;label&gt;&lt;input type="checkbox" name="dish"/&gt;香甜&lt;/label&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;开关&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;label class="lui-label-switch"&gt;
    &lt;input type="checkbox"/&gt;
    &lt;div class="checkbox"&gt;&lt;/div&gt;
    &lt;/label&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;文本域&lt;/div&gt;
    &lt;div class="input"&gt;
    &lt;textarea name="" id="" cols="10" rows="5" placeholder="请在此处介绍自己..."&gt; &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;footer&gt;
    &lt;button type="button" class="lui-btn lui-btn-primary lui-btn-block"&gt;提交信息&lt;/button&gt;
    &lt;/footer&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 栅格-->
                <ul id="grid">
                    <li>
                        <p class="lui-header">栅格</p>
<pre><code class="html">    &lt;div class="lui-row"&gt;
    &lt;h3 class="span6"&gt;50%&lt;/h3&gt;
    &lt;h3 class="span6"&gt;50%&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="lui-row"&gt;
    &lt;h3 class="span4"&gt;33%&lt;/h3&gt;
    &lt;h3 class="span4"&gt;33%&lt;/h3&gt;
    &lt;h3 class="span4"&gt;33%&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="lui-row"&gt;
    &lt;h3 class="span2"&gt;20%&lt;/h3&gt;
    &lt;h3 class="span10"&gt;80%&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="lui-row"&gt;
    &lt;h3 class="span12"&gt;无间距&lt;/h3&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 确认框-->
                <ul id="confirm">
                    <li>
                        <p class="lui-header">确认框</p>
<pre><code class="html">    &lt;p class="h2" onclick="confirmDlg()"&gt;有标题的弹出框，点蒙层不能关闭&lt;/p&gt;

    &lt;p class="h2" onclick="confirmDlgNoTitle()"&gt;无标题的弹出框&lt;/p&gt;

    &lt;p class="h2" onclick="confirmDlgNoTitleNoBtn()"&gt;自定义内容的弹出框&lt;/p&gt;

    &lt;p class="h2" onclick="confirmDlgFunc()"&gt;有回调的弹出框&lt;/p&gt;

    &lt;p class="h2" onclick="confirmDlgBottom()"&gt;固定底部的弹出框&lt;/p&gt; </code></pre>
<pre><code class="js"> function confirmDlg() {
    $.open({
    title: "hello",
    contents: "点蒙层不能关闭",
    lock: true,
    submit: function () {
    },
    cancel: function () {
    }
    });
    }
    function confirmDlgNoTitle() {
    $.open({
    title: false,
    contents: "content",
    lock: false,
    submit: function () {
    },
    cancel: function () {
    }
    });
    }
    function confirmDlgNoTitleNoBtn() {
    $.open({
    title: false,
    contents: $("#hongbao"),
    lock: false
    });
    }
    function confirmDlgFunc() {
    $.open({
    title: false,
    contents: "content",
    lock: false,
    submit: function () {
    $.alert("我是回调");
    },
    cancel: function () {
    }
    });
    }
    function confirmDlgBottom() {
    $.open({
    title: "提示框",
    closeable: false,
    contents: "content",
    lock: false,
    fixed: "bottom",
    submit: function () {
    $.alert("我是回调");
    },
    cancel: function () {
    }
    });
    }
</code></pre>
                    </li>
                </ul>
                <!-- totas-->
                <ul id="tip">
                    <li>
                        <p class="lui-header">totas</p>
<pre><code class="html">    &lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;Totas&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;article&gt;
    &lt;p class="h2" onclick="confirmDlg()"&gt;显示Totas&lt;/p&gt;
    &lt;/article&gt;
    &lt;/div&gt;
</code></pre>
<pre><code class="js">function confirmDlg() {
    $.alert("2秒后消失");
    }
</code></pre>
                    </li>
                </ul>
                <!-- 加载提示-->
                <ul id="loading">
                    <li>
                        <p class="lui-header">加载提示</p>
<pre><code class="html">&lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;确认框&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;article&gt;
    &lt;p class="h2" onclick="confirmDlg()"&gt;显示加载提示&lt;/p&gt;
    &lt;/article&gt;
    &lt;/div&gt;
</code></pre>
<pre><code class="js"> function confirmDlg() {
    $.loading({
    type: 1,
    }).show();
    }
</code></pre>
                    </li>
                </ul>
                <!-- 标签页-->
                <ul id="tab">
                    <li>
                        <p class="lui-header">标签页</p>
<pre><code class="html">&lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;确认框&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    &lt;div class="tab-head"&gt;
    &lt;span class="item active" data-href="#jxz"&gt;选项卡一&lt;/span&gt;
    &lt;span class="item" data-href="#yjd"&gt;选项卡二&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="tab-panel active" id="jxz"&gt;
    &lt;h1&gt;内容一&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="tab-panel" id="yjd"&gt;
    &lt;h1&gt;内容二&lt;/h1&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;/div&gt;
</code></pre>
<pre><code class="js"> $(function () {
    $('.tab-head').tabs({})
    })
</code></pre>
                    </li>
                </ul>
                <!-- 左侧选项卡-->
                <ul id="tab-vertical-scroll">
                    <li>
                        <p class="lui-header">左侧选项卡</p>
<pre><code class="html">    &lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;测滑菜单&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section style="padding:0"&gt;
    &lt;section class="span12"&gt;
    &lt;div class="lui-horizontal-control"&gt;
    &lt;div class="lui-horizontal-control-inner"&gt;
    &lt;div class="lui-control-item"&gt;item1&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item2&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item3&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item4&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item5&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item6&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item7&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item8&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item9&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item10&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;div class="lui-vertical-control" style="padding-top:8rem;"&gt;
    &lt;div class="lui-vertical-control-inverted span3"&gt;
    &lt;a href="#content1" data-index="1" class="lui-control-item active"&gt;item1&lt;/a&gt;
    &lt;a href="#content2" data-index="2" class="lui-control-item"&gt;item2&lt;/a&gt;
    &lt;a href="#content3" data-index="3" class="lui-control-item"&gt;item3&lt;/a&gt;
    &lt;a href="#content4" data-index="4" class="lui-control-item"&gt;item4&lt;/a&gt;
    &lt;a href="#content5" data-index="5" class="lui-control-item"&gt;item5&lt;/a&gt;
    &lt;a href="#content6" data-index="6" class="lui-control-item"&gt;item6&lt;/a&gt;
    &lt;a href="#content7" data-index="7" class="lui-control-item"&gt;item7&lt;/a&gt;
    &lt;a href="#content8" data-index="8" class="lui-control-item"&gt;item8&lt;/a&gt;
    &lt;a href="#content9" data-index="9" class="lui-control-item"&gt;item9&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="lui-vertical-control-content span9"&gt;
    &lt;ul id="content1" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content2" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试2&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试2&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试2&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content3" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试3&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试3&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试3&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content4" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试4&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试4&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试4&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content5" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试5&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试5&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试5&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content6" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试6&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试6&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试6&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content7" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试7&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试7&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试7&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="content8" class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;测试8&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 顶部选项卡-->
                <ul id="tab-horizontal-scroll">
                    <li>
                        <p class="lui-header">顶部选项卡</p>
<pre><code class="html">    &lt;div class="lui-horizontal-control"&gt;
    &lt;div class="lui-horizontal-control-inner"&gt;
    &lt;div class="lui-control-item"&gt;item1&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item2&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item3&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item4&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item5&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item6&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item7&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item8&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item9&lt;/div&gt;
    &lt;div class="lui-control-item"&gt;item10&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 列表-->
                <ul id="list">
                    <li>
                        <p class="lui-header">列表</p>
<pre><code class="html">    &lt;div class="container" style="background-color:#f0f0f0"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;列表&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    &lt;ul class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-divider"&gt;普通列表&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    列表一
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    列表一
    &lt;/li&gt;
    &lt;li class="lui-list-divider"&gt;有右箭头的列表&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    &lt;a class="lui-list-angle-right" href="#"&gt;列表一2列表一列表一列表一列表一列表一列表一列表一列表一列表一&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    &lt;a class="lui-list-angle-right" href="#"&gt;列表一&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-divider"&gt;有控件的列表&lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    列表一
    &lt;span class="lui-badge lui-badge-primary"&gt;5&lt;/span&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    列表一
    &lt;label class="lui-label-switch"&gt;
    &lt;input type="checkbox"/&gt;
    &lt;div class="checkbox"&gt;&lt;/div&gt;
    &lt;/label&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    列表一
    &lt;button class="lui-btn lui-btn-small lui-btn-primary"&gt;查看&lt;/button&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item"&gt;
    列表一
    &lt;div class="lui-checkbox"&gt;
    &lt;label&gt;&lt;input type="checkbox" name="dish" checked/&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/section&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 图文列表-->
                <ul id="medialist">
                    <li>
                        <p class="lui-header">图文列表</p>
<pre><code class="html">    &lt;div class="container" style="background-color:#e5e5e5"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;图文列表&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    &lt;ul class="lui-list lui-list-border"&gt;
    &lt;li class="lui-list-divider"&gt;图片在左侧&lt;/li&gt;
    &lt;li class="lui-list-item lui-media"&gt;
    &lt;a href=""&gt;
    &lt;img class="lui-media-object pull-left" src="../dist/css/images/cbd.jpg" alt=""/&gt;

    &lt;div class="lui-media-body"&gt;
    列表一
    &lt;h3 class="text-ellipsis"&gt;列表一列表一列表一列表一列表一列表一列表一&lt;/h3&gt;
    &lt;/div&gt;
    &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item lui-media"&gt;
    &lt;a href=""&gt;
    &lt;img class="lui-media-object pull-left" src="../dist/css/images/cbd.jpg" alt=""/&gt;

    &lt;div class="lui-media-body"&gt;
    列表一
    &lt;h3 class="text-ellipsis"&gt;列表一列表一列表一列表一列表一列表一列表一&lt;/h3&gt;
    &lt;/div&gt;
    &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-divider"&gt;图片在右侧&lt;/li&gt;
    &lt;li class="lui-list-item lui-media"&gt;
    &lt;a href=""&gt;
    &lt;img class="lui-media-object pull-right" src="../dist/css/images/cbd.jpg" alt=""/&gt;

    &lt;div class="lui-media-body"&gt;
    列表一
    &lt;h3 class="text-ellipsis"&gt;列表一列表一列表一列表一列表一列表一列表一&lt;/h3&gt;
    &lt;/div&gt;
    &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="lui-list-item lui-media"&gt;
    &lt;a href=""&gt;
    &lt;img class="lui-media-object pull-right" src="../dist/css/images/cbd.jpg" alt=""/&gt;

    &lt;div class="lui-media-body"&gt;
    列表一
    &lt;h3 class="text-ellipsis"&gt;列表一列表一列表一列表一列表一列表一列表一&lt;/h3&gt;
    &lt;/div&gt;
    &lt;/a&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/section&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 工具栏-->
                <ul id="toolbar">
                    <li>
                        <p class="lui-header">工具栏</p>
<pre><code class="html">  &lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;工具栏&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;

    &lt;/section&gt;
    &lt;footer&gt;
    &lt;nav class="lui-bar"&gt;
    &lt;div class="lui-bar-item span3"&gt;
    &lt;a href="#"&gt;
    &lt;h4 class="block"&gt;&lt;i class="fa fa-home fa-2x text-primary"&gt;&lt;/i&gt;&lt;/h4&gt;
    &lt;h6&gt;主页&lt;/h6&gt;
    &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="lui-bar-item span3"&gt;
    &lt;a href="#"&gt;
    &lt;h4 class="block"&gt;&lt;i class="fa fa-user fa-2x text-muted"&gt;&lt;/i&gt;&lt;/h4&gt;
    &lt;h6&gt;主页&lt;/h6&gt;
    &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="lui-bar-item span3"&gt;
    &lt;a href="#"&gt;
    &lt;h4 class="block"&gt;&lt;i class="fa fa-heart fa-2x text-muted"&gt;&lt;/i&gt;&lt;/h4&gt;
    &lt;h6&gt;主页&lt;/h6&gt;
    &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="lui-bar-item span3"&gt;
    &lt;a href="#"&gt;
    &lt;h4 class="block"&gt;&lt;i class="fa fa-bell fa-2x text-muted"&gt;&lt;/i&gt;&lt;/h4&gt;
    &lt;h6&gt;主页&lt;/h6&gt;
    &lt;/a&gt;
    &lt;/div&gt;
    &lt;/nav&gt;
    &lt;/footer&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 侧栏-->
                <ul id="panel">
                    <li>
                        <p class="lui-header">侧栏</p>
<pre><code class="html">  &lt;div class="page-group"&gt;
    &lt;div class="page page-current"&gt;
    &lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;侧栏&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;article&gt;
    &lt;p&gt;
    &lt;button type="button" class="lui-btn lui-btn-primary open-panel" data-panel="#panel-left-demo"&gt;滑动打开左侧栏 &lt;/button&gt;
    &lt;/p&gt;
    &lt;p&gt;
    &lt;button type="button" class="lui-btn lui-btn-primary open-panel" data-panel="#panel-right-demo"&gt;覆盖打开右侧栏 &lt;/button&gt;
    &lt;/p&gt;
    &lt;/article&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel-overlay"&gt;&lt;/div&gt;
    &lt;div class="panel panel-left panel-reveal" id="panel-left-demo"&gt;
    &lt;div class="container"&gt;
    &lt;article&gt;
    &lt;h1 class="text-center"&gt;
    我来自左边
    &lt;a href="#" class="lui-btn lui-btn-link close-panel"&gt;点击关闭&lt;/a&gt;
    &lt;/h1&gt;
    &lt;/article&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel panel-right panel-cover" id="panel-right-demo"&gt;
    &lt;div class="container"&gt;
    &lt;article&gt;
    &lt;h1 class="text-center text-white"&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;p&gt;我来自右边&lt;/p&gt;
    &lt;a href="#" class="lui-btn lui-btn-link close-panel"&gt;点击关闭&lt;/a&gt;
    &lt;/h1&gt;
    &lt;/article&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
</code></pre>
                    </li>
                </ul>
                <!-- 自定义键盘-->
                <ul id="keyboard">
                    <li>
                        <p class="lui-header">自定义键盘</p>
<pre><code class="html">    &lt;header class="bg-white"&gt;
    &lt;nav class="h2"&gt;
    &lt;div class="span3 text-nowrap"&gt;已选要求：&lt;/div&gt;
    &lt;div class="lui-search span9"&gt;
    &lt;input type="text" class="lui-keyboard-input" maxlength="5"/&gt;
    &lt;i class="lui-search-clear"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
</code>
</pre>
                    </li>
                </ul>
                <!-- 日期时间-->
                <ul id="datetime">
                    <li>
                        <p class="lui-header">日期时间</p>
<pre><code class="html">
    &lt;div class="container"&gt;
    &lt;header class="bg-muted"&gt;
    &lt;nav class="text-center"&gt;
    &lt;div class="span12 h1"&gt;日期选择器&lt;/div&gt;
    &lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    &lt;div class="lui-form-ground"&gt;
    &lt;div class="lui-form-line"&gt;
    &lt;div class="label"&gt;出生日期：&lt;/div&gt;

    &lt;div class="input"&gt;
    &lt;input type="text" id="date-picker" placeholder="出生日期"/&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;/div&gt;
</code></pre>
<pre><code class="js">
    var pickerYear = $('#date-picker').datetimePicker({
    onSubmit: function () {
    console.log("ok");
    }
    });
</code>
</pre>
                    </li>
                </ul>
                <div class="doc-footer ">
                    第一版
                </div>
            </section>
        </div>
        <article class="device device-fixed">
            <iframe id="ui-content" src="views/typegraphy.html" frameborder="0" class="device-inner"
                    width="100%"
                    height="100%" scrolling="no">
            </iframe>
        </article>
    </section>
</div>
<script src="dist/js/zepto.min.js"></script>
<script src="dist/js/zxy-js-lib.min.js"></script>
<script>
    $(document).ready(function () {
        $(".lui-vertical-control-content").tabscroll({
            callback: function (href) {
                $('#ui-content').attr("src", "views/" + href + ".html");
            }
        });

        $('pre code').each(function (i, block) {
            hljs.highlightBlock(block);
        });
    });
</script>
</body>
</html>